
<template>
    <div>
      <el-steps :active="active" finish-status="success">
        <el-step title="基础设置"></el-step>
        <el-step title="评估表单设计"></el-step>
      </el-steps>
      <!--   基本信息 -->
      <el-form
        v-if="active == 0"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!--  评估表单设计  -->
  
      <div v-if="active == 1">
        <!-- <h1>这是评估表单的设计，包括区域，区域字段的设计</h1>
  
        <el-table   style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address"  label="地址"> </el-table-column>
        </el-table> -->
        <!-- <el-button @click="addColumn">添加列</el-button> -->
        <h3>常规指标区</h3>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
          >
          </el-table-column>
        </el-table>
  
        <h3>加减分区</h3>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="column in pncolumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
          >
          </el-table-column>
        </el-table>
      </div>
  
      <div>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "AddUAssessForm",
  
    data() {
      return {
        // 常规指标区
        columns: [
          { prop: "name", label: "名称", width: "180" },
          { prop: "score", label: "分值", width: "180" },
          { prop: "evaltype", label: "评分方式", width: "180" },
          { prop: "evaldescription", label: "评估说明", width: "180" },
          { prop: "indicatordescription", label: "指标说明", width: "180" },
          // 初始列配置
        ],
         // 加减分区
         pncolumns: [
          { prop: "name", label: "名称", width: "180" },
          { prop: "score", label: "分值", width: "180" },
          { prop: "evaltype", label: "评分方式", width: "180" },
          { prop: "indicatordescription", label: "指标说明", width: "180" },
          // 初始列配置
        ],
        tableData: [
          // 表格数据
        ],
        ruleForm: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: "",
        },
        rules: {
          name: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
          ],
          region: [
            { required: true, message: "请选择活动区域", trigger: "change" },
          ],
          date1: [
            {
              type: "date",
              required: true,
              message: "请选择日期",
              trigger: "change",
            },
          ],
          date2: [
            {
              type: "date",
              required: true,
              message: "请选择时间",
              trigger: "change",
            },
          ],
          type: [
            {
              type: "array",
              required: true,
              message: "请至少选择一个活动性质",
              trigger: "change",
            },
          ],
          resource: [
            { required: true, message: "请选择活动资源", trigger: "change" },
          ],
          desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        },
        active: 0,
      };
    },
    methods: {
      addColumn() {
        // 假设我们要添加的列是动态确定的
        const newColumn = { prop: "address", label: "地址", width: "200" };
        // 将新列添加到 columns 数组中
        this.columns.push(newColumn);
      },
      submitForm2P: function () {
        debugger;
        this.$emit("handleChildEvent", false);
      },
  
      submitForm: function () {
        debugger;
        this.$emit("handleChildEvent", false);
      },
      // submitForm(formName) {
      //   this.$refs[formName].validate((valid) => {
      //     if (valid) {
      //       alert("submit!");
      //     } else {
      //       console.log("error submit!!");
      //       return false;
      //     }
      //   });
      // },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      next() {
        if (this.active++ > 2) this.active = 0;
      },
    },
  };
  </script>